<template>
	<view>
		<van-field v-if="!item.hide" :value="formData[item.name]" :label-class="item.rules[0].required?'required':''"
			@click="showDatePicker=true">
			<template #label>
				{{item.llabel}}
				<van-icon v-if="item.labelIcon" :name="item.labelIcon" @click.stop="handleClickIcon(item)"></van-icon>
			</template>
			<template #button>
				<a v-if="item.button" class="button-link">{{item.button.text}}</a>
			</template>
		</van-field>
		<!-- 选择日期 -->
		<van-popup v-model="showDatePicker" position="bottom" round>
			<van-datetime-picker v-model="item.currentDate" :type="item.dateType || 'date'" title="选择日期"
				:min-date="item.minDate" :max-date="item.maxDate" @confirm="handleDateConfirm"
				@cancel="showDatePicker = false" />
		</van-popup>
	</view>
</template>

<script>
	import base from "../base.js"
	// import dayjs from "dayjs"
	export default {
		name: "dh-date-picker",
		mixins: [base],
		data() {
			return {
				showDatePicker: false
			}
		},
		methods: {
			handleDateConfirm(date) {
				// let format = this.item.format || "YYYY-MM-DD"
				// this.formData[this.item.name] = dayjs(date).format(format)
				this.showDatePicker = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.van-cell {
		padding: 15px 12px;

		&.column {
			flex-direction: column;
			padding: 10px 12px;

			// /deep/ .van-field__label {
			::v-deep .van-field__label {
				width: 100%;

				&.required {
					&::after {
						position: relative;
						top: 2px;
						margin-left: 2px;
						color: #f02737;
						content: "*";
					}
				}
			}
		}
	}

	.van-cell:last-child::after {
		display: block;
	}

	// Popup圆角
	.van-popup--bottom.van-popup--round {
		border-radius: 6px 6px 0 0;
	}
</style>